<template>
	<view class="wrap">
		<!-- 导航栏 -->
		<view class="nav-bar">
			<text class="iconfont icon-back" @click="goBack"></text>
			<text>{{ med1 }} 详情</text>
		</view>

		<!-- 数据展示区 -->
		<view class="dev-area">
			<view class="dev-card">
				<view class="dev-name">服用次数1</view>
				<view class="dev-data">{{ fuyong1 }} 次/日</view>
			</view>

			<view class="dev-card">
				<view class="dev-name">服用量1</view>
				<view class="dev-data">{{ take1 }} 粒</view>
			</view>
		</view>
	</view>
</template>

<script>
	const {
		createCommonToken
	} = require('@/key.js')
	export default {
		data() {
			return {
				med1: '',
				token: '',
			}
		},
		onShow() {
			this.fetchDevData();
			setInterval(() => {
				this.fetchDevData();
			}, 3000) //最好放到onLoad里
		},
		onLoad(options) {
			const params = {
				author_key: '5mNCPyxsuoG7R5LWGNvm70PEoE6pfvMn1LNxMuY2TPjd2UNtQR/FjLMfxUrhLpGg',
				version: '2022-05-01',
				user_id: '427477',
			}
			this.token = createCommonToken(params);
			// 参数解码[6,8](@ref)
			this.medName = decodeURIComponent(options.med)
			this.useTimes = Number(options.times)
			this.dosage = Number(options.dosage)

			// 页面标题同步
			uni.setNavigationBarTitle({
				title: `${this.medName} 详情`
			})
		},
		methods: {
			fetchDevData() {
				uni.request({
					url: 'https://iot-api.heclouds.com/thingmodel/query-device-property', //仅为示例，并非真实接口地址。
					method: 'GET',
					data: {
						product_id: 'J6N06W2oo1',
						device_name: 'SmartPillbox'
					},
					header: {
						'authorization': this.token //自定义请求头信息
					},
					success: (res) => {
						console.log(res.data);
						console.log(res.data.data[6].value);
						this.temp = res.data.data[15].value;
						this.humi = res.data.data[6].value;
						this.med1 = res.data.data[7].value;
						this.fuyong1 = res.data.data[2].value;
						this.take1 = res.data.data[11].value;

					}
				});
			},
			goBack() {
				uni.navigateBack({
					delta: 1,
					animationType: 'slide-out-right',
					animationDuration: 300
				})
			}

		}
	}
</script>

<style scoped>
	/* 导航栏样式 */
	.nav-bar {
		padding: 20rpx 30rpx;
		background: #f8f8f8;
		display: flex;
		align-items: center;
	}

	.icon-back {
		font-size: 40rpx;
		margin-right: 20rpx;
	}

	/* 复用原页面样式 */
	.wrap {
		padding: 30rpx;
	}

	.dev-area {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
	}

	.dev-card {
		height: 150rpx;
		width: 320rpx;
		border-radius: 30rpx;
		margin-top: 30rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
		box-shadow: 0 0 15rpx #ccc;
	}

	.dev-name {
		font-size: 20rpx;
		text-align: center;
		color: #6d6d6d;
	}

	.dev-data {
		font-size: 50rpx;
		color: #2b9939;
		/* 修改为强调色 */
	}
</style>